<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="/taglibs.jsp"%>
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">  
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="${ctx}/resources/semanticui/semantic.min.css" rel="stylesheet" type="text/css" />
    <link href="${ctx}/resources/apps.css" rel="stylesheet" type="text/css" />
    <title>分享平台</title>  
</head>
<body>
<div class="ui segment" id="n-page">
&nbsp;<br>
    <h3 class="ui attached header" id="list-title">
        请朋友关注“跳哪里”
    </h3>
    &nbsp;<br>
    可以请你的朋友扫描下面的二维码，让他/她关注“跳哪里”。<br>
    <div class="ui segment" id="qrcode">
        <div class="ui small image">
            <img src="${ctx}/resources/images/qrcode.jpg">
        </div>
    </div>

&nbsp;<br>
    <h3 class="ui attached header" id="list-title">
        分享给朋友/朋友圈分享
    </h3>
    &nbsp;<br>
    你也可以点击下面按钮，将“跳哪里”分享给朋友或分享到朋友圈。<br>
    &nbsp;<br>

    <div class="ui center aligned segment" id="choice-buttons"> 
        <div class="two ui buttons"> 
            <div class="ui button active dog" id="friend">分享给朋友</div> 
            <div class="ui button dog" id="circle">朋友圈分享</div> 
        </div>
    </div>

</div>

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="${ctx}/resources/semanticui/jquery-2.1.4.min.js"></script>
<script src="${ctx}/resources/semanticui/semantic.js" type="text/javascript"></script>
<script type="text/javascript">

wx.config({
    debug: true, 
    appId: "${appid}",  
    timestamp: ${currenttimestamp},  
    nonceStr: "${nonceStr}", 
    signature: "${signatureStr}", 
    jsApiList: ['checkJsApi',
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ',
        'onMenuShareWeibo',
        'chooseImage',
        'previewImage',
        'uploadImage',
        'downloadImage']  
});

wx.ready(function () {
  // 1 判断当前版本是否支持指定 JS 接口，支持批量判断
  document.querySelector('#checkJsApi').onclick = function () {
    wx.checkJsApi({
      jsApiList: [
        'getNetworkType',
        'previewImage'
      ],
      success: function (res) {
        alert(JSON.stringify(res));
      }
    });
  };

  // 2. 分享接口
  // 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
  document.querySelector('#friend').onclick = function () {
    wx.onMenuShareAppMessage({
      title: '互联网之子',
      desc: '在长大的过程中，我才慢慢发现，我身边的所有事，别人跟我说的所有事，那些所谓本来如此，注定如此的事，它们其实没有非得如此，事情是可以改变的。更重要的是，有些事既然错了，那就该做出改变。',
      link: 'http://movie.douban.com/subject/25785114/',
      imgUrl: 'http://demo.open.weixin.qq.com/jssdk/images/p2166127561.jpg',
      trigger: function (res) {
        // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
        alert('用户点击发送给朋友');
      },
      success: function (res) {
        alert('已分享');
      },
      cancel: function (res) {
        alert('已取消');
      },
      fail: function (res) {
        alert(JSON.stringify(res));
      }
    });
    alert('已注册获取“发送给朋友”状态事件');
  };
}

/*
wx.onMenuShareAppMessage({
    title: '这个是测试', // 分享标题
    desc: '这个是测试试试', // 分享描述
    link: 'http://www.sohu.com', // 分享链接
    imgUrl: '', // 分享图标
    type: '', // 分享类型,music、video或link，不填默认为link
    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
    success: function () {
        alert("OK")
    },
    cancel: function () {
        alert("NOK")
    }
});
*/

    var handler = { 
        activate: function() { 
            $(this)
                .addClass('active') 
                .siblings() 
                .removeClass('active'); 

            if($(this).attr('id') == 'next') {
                location.href = 'zhitongche4.html';
            }
        } 
    };

    $(document).ready(function() { 
        $('.button').on('click', handler.activate);
    });

</script>
</body>
</html>